<template>
  <el-form ref="formRef" :model="formData" label-width="110px">
    <el-form-item label="事项标题" prop="matterTitle">
      <el-input v-model="formData.matterTitle" disabled />
    </el-form-item>
    <el-row>
      <el-col :span="8">
        <el-form-item label="责任领导" prop="responsibleLeader">
          <LeaderSelect v-model="formData.responsibleLeader" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="业务领域" prop="domainId">
          <DictionarySelect
            v-model="formData.domainId"
            disabled
            parent-dictionary-value="runway"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="重点关注" prop="isFocus">
          <FocusSelect v-model="formData.isFocus" disabled />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="办理要求" prop="handleRequire">
      <el-input
        v-model="formData.handleRequire"
        type="textarea"
        disabled
        :autosize="{ minRows: 5 }"
      />
    </el-form-item>
    <el-form-item label="牵头单位" prop="unitId">
      <unit-select v-model="formData.unitId" disabled />
    </el-form-item>
    <el-form-item label="期限设置" prop="deadlineList">
      <DeadlineTable v-model="formData.matterDeadlinesList" disabled />
    </el-form-item>
    <el-form-item label="抄送单位" prop="copyUnit">
      <CopyUnitTable v-model="formData.copyUnit" disabled />
    </el-form-item>
    <el-form-item label="相关材料" prop="uuid">
      <file-upload ref="fileUploadRef" v-model="formData.fileList" disabled />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, useTemplateRef } from 'vue'
import { FormInstance, ScrollbarInstance } from 'element-plus'
import DictionarySelect from '@/components/dictionary/DictionarySelect.vue'
import LeaderSelect from '@/components/leader/LeaderSelect.vue'
import DeadlineTable from '@/views/mission/task/thing/DeadlineTable.vue'
import UnitSelect from '@/components/unit/UnitSelect.vue'
import FileUpload from '@/components/FileUpload.vue'
import CopyUnitTable from '@/views/mission/task/thing/CopyUnitTable.vue'
import { getDeadlinesByMatterId, getMatterDetail } from '@/api/mission/thing'
import { initIFileList } from '@/plugins/file'
import FocusSelect from '@/components/statusShow/focus/FocusSelect.vue'

const scrollbarRef = useTemplateRef<ScrollbarInstance>('scrollbarRef')
const formRef = useTemplateRef<FormInstance>('formRef')
const fileUploadRef =
  useTemplateRef<InstanceType<typeof FileUpload>>('fileUploadRef')
const formData = reactive({
  id: null,
  matterTitle: null,
  domainId: null,
  responsibleLeader: null,
  isFocus: 0,
  handleRequire: null,
  unitId: null,
  copyUnit: null,
  fileList: null,
  matterDeadlinesList: [],
})
defineExpose({ show, close })

function close() {
  formRef.value.resetFields()
  Object.assign(formData, {
    id: null,
    matterTitle: null,
    domainId: null,
    responsibleLeader: null,
    isFocus: 0,
    handleRequire: null,
    unitId: null,
    copyUnit: null,
    fileList: null,
    matterDeadlinesList: [],
  })
  scrollbarRef.value.setScrollTop(0)
}

async function show(rowId: number) {
  const { data } = await getMatterDetail(rowId)
  if (data.status === 200) {
    Object.assign(formData, {
      id: data.data.matterId,
      matterTitle: data.data.matterTitle,
      domainId: data.data.domainId,
      responsibleLeader: data.data.responsibleLeader,
      isFocus: data.data.isFocus,
      handleRequire: data.data.handleRequire,
      unitId: data.data.leadUnitId,
      copyUnit: data.data.ccUnitIds
        ? data.data.ccUnitIds.split(',').map((item: string) => Number(item))
        : null,
      fileList: initIFileList(data.data.fileList),
    })
    await getDeadlineList()
  }
}

async function getDeadlineList() {
  const { data } = await getDeadlinesByMatterId(formData.id)
  if (data.status === 200) {
    formData.matterDeadlinesList = data.data
  }
}
</script>

<style scoped lang="scss">
:deep(.el-date-editor) {
  width: 100%;
}
</style>
